<template>
    <div class="app-container">
        <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
            <el-tab-pane label="资源管理" name="resource">

            </el-tab-pane>
            <el-tab-pane label="资源类型" name="resourceType">

            </el-tab-pane>
            <el-tab-pane label="日程类型" name="calendarType">

            </el-tab-pane>
            <el-tab-pane label="权限设置" name="permission">

            </el-tab-pane>
            <div v-if="activeName == 'resource'">
                <Natural />
            </div>
            <div v-if="activeName == 'resourceType'">
                <Type />
            </div>
            <div v-if="activeName == 'calendarType'">
                <DateType />
            </div>
            <div v-if="activeName == 'permission'">
                <Permission />
            </div>
        </el-tabs>
    </div>
</template>


<script lang="ts" setup>
import type { TabsPaneContext } from 'element-plus'
import Natural from './components/natural.vue'
import Type from './components/type.vue'
import DateType from './components/dateType.vue'
import Permission from './components/permission.vue'



const activeName = ref('resource')
const handleClick = (tab: TabsPaneContext, event: Event) => {
    
}
</script>



<style lang="scss" scoped></style>